jQuery(document).ready(function ($) {
    // Ce code est appelée quand la page est chargée ou reloadée
    // On charge les 5 derniers articles (ou moins) depuis le web service

    // On cache le bouton de sauvegarde des modifications pour chaque article
    $("#update-article").hide();

    // URL du WS et fonction de callback en cas de succ-s
    $.get("/BlogWS/resources/article/0/5", function (data) {

        var i = 0;
        // no article ?
        if (data != null) {
            // The json returned by the WebService looks like this: (use JS debug console
            // in your browser !
            // CAS 1: un seul article: 
            // {"article":{"content":"Voici une photo de Rome cet été...",
            //             "id":"2","time":"2012-12-19T16:30:47.612+01:00",
            //             "titre":"Photos de vacances"}
            // }
            // CAS 2 : plusieurs articles
            // {"article":[
            //      {"content":"Voici une photo de Rome cet été...",
            //       "id":"2","time":"2012-12-19T16:30:47.612+01:00",
            //       "titre":"Photos de vacances"},
            //      {"content":"Second contenu",
            //       "id":"3","time":"2012-12-19T16:32:25.717+01:00",
            //       "titre":"Second titre"}
            //       ]}
            // Quand il y en a plusieurs, on a un tableau [...]
            // Mais la méthode each de jQuery traite indifféremment les deux cas. 
            // merci jQuery.
            $(data.article).each(function () {
                i++
                $("#list-article").prepend(renderItem(this.id, this.titre, this.content, this.time));
            });
            if (i == 0)
                showWelcome();

            // Si on est venu ici après une suppression on supprime le lien
            // "load more"
            if (removeLoadMore()) {
                $("#loadmore").remove();
                console.log("DELETE");
            } else {
                // Si on vient ici après la publication d'un nouvel article on
                // fait apparitre le bouton "load more"
                console.log("INSERT");
                $("<div id='loadmore'><a href='#' id='load' >J'en veux plus !</a></div>").insertAfter("#list-article");
            }
        }
    }, "json");


    // Si on clique sur le bouton "publier". L'utilisation de live() permet
    // de binder des events sur des éléments qui n'existent peut être pas encore
    $("#write").live('click', function () {
        // On construit un objet qui va contenir les champs du formulaire  
        // Notamment, certains champs qui correspondront aux images  
        // selectionnees  
        var data = new FormData();
        // champs du formulaire titre et contenu...  
        data.append('titre', $("#titreWrite").val());
        data.append('contenu', $("#contentWrite").val());

        // et les images. Le selecteur correspond aux exemples  
        // du cours avec drag'n'drop etc. Dans lequel on a une liste  
        // <output id="list>...</output> qui contient des images 
        jQuery.each($('#list img'), function (i, img) {
            // img.src correspond au dataURL des images
            blobImg = dataURItoBlob(img.src);
            data.append('image' + i, blobImg);


        });
        // soumission par POST au WS  
        $.ajax({
            url: '/BlogWS/resources/article',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (data) {
                alert(data);
            }
        });

        // Il y a au moins un article, on supprime le message de bienvenue
        $("#welcome").remove();

        if (removeLoadMore()) {
            $("#loadmore").remove();
        }

    });


    // Clic sur le bouton delete pour supprimer un article
    $(".delete").live("click", function () {

        var id = $(this).attr("href");
        console.log(id);

        $.ajax(id,
            {
                type: "DELETE",
                success: function (d) {
                    $("#article-" + d).slideUp('slow', function () {
                        $(this).remove()
                    });
                }
            });

        if (removeLoadMore()) {
            $("#loadmore").remove();
        }

        return false;

    });

    // Click sur un titre d'article
    $(".title").live("click", function () {
        var url = $(this).attr("href");

        $(document).scrollTop($(document).height());

        $.get(url, function (data) {

            $("#formupdate-article #titre").val(data.titre);
            $("#formupdate-article #content").val(data.content);
            $("#formupdate-article #id").val(data.id);

            $("#write-article").hide();
            $("#update-article").show();
        });

        if (removeLoadMore()) {
            $("#loadmore").remove();
        }

        return false;
    });

    // Clic sur le bouton update pour modifier un article
    $("#update").live("click", function () {

        var data = $("#formupdate-article").serializeArray();
        console.log(data);

        $.ajax({
            url: "/BlogWS/resources/article",
            type: "PUT",
            data: data,
            success: function (d) {
                $("#formupdate-article").each(function () {
                    this.reset();
                });

                updateRenderedItem(d.id, d.titre, d.content, d.time)

                $("#update-article").hide();
                $("#write-article").show();

            }

        });

        if (removeLoadMore()) {
            $("#loadmore").remove();
        }

    });

    // clic sur le lien "load more"
    $("#load").live("click", function () {
        $("#loadmore").remove();
        var count = $("#list-article").children().length;
        var limit = count + 5;

        $.get("/BlogWS/resources/article/" + count + "/" + limit, function (data) {


            $(data).each(function () {

                $("#list-article").append(renderItem(this.id, this.titre, this.content, this.time));
            });
            if (removeLoadMore()) {
                $("#loadmore").remove();
            } else {
                $("<div id='loadmore'><a href='#' id='load' >J'en veux plus !</a></div>").insertAfter("#list-article");
            }
        }, "json");
    });


    function removeLoadMore() {
        $.get("/BlogWS/resources/article/count", function (data) {
            var i = $("#list-article").children().length;
            console.log("dans la bd : " + data + " | sur le site : " + i);
            if (data == i) {
                return true;
            } else
                return false;
        });
    }

    // creation et ajout d'un article dans la page
    function renderItem(id, titre, content, date) {
        var myDate = new Date(date);
        var strDate = "";
        var imgs = "C:\Users\user\Documents\NetBeansProjects\BlogWSwithImages\BlogWS\build\web"
        strDate += myDate.getUTCDate() + "/" + myDate.getMonth() + "/" + myDate.getFullYear();
        strDate += " à " + myDate.getHours() + ":" + myDate.getMinutes();
        return "<div class='article' id='article-" + id + "'>\
                <h2>" + titre + "</h2></a>\
                <p class='content'>" + content + "</p>\
                <p class='img'>" + img.src + "<div class='postmeta'>\n\
                    <p class='alignleft'>Article publi&eacute; le " + strDate + "</p>\n\
                    <p class='alignright'>\n\
                        <a class='button blue delete' href='/BlogWS/resources/article/" + id + "'>Supprimer</a>\n\
                        <a href='/BlogWS/resources/article/" + id + "' class='button blue title'>Modifier</a>\
                    </p></div>\n\
                    <div class='clearfix'></div>\
                </div>";
    }

    function updateRenderedItem(id, titre, content) {
        console.log(id);

        $("#article-" + id + " h2").html(titre);
        $("#article-" + id + " .title").attr("rel", "/BlogWS/resources/article/" + id);
        $("#article-" + id + " .content").html(content);

        $("#article-" + id).css("background-color", "#E3F6CE");
        window.setTimeout(function () {
            $("#article-" + id).css("background-color", "white");
        }, 1000);

    }

    function showWelcome() {
        $("#list-article").html("<div id='welcome'>Aucun article n'est présent.<br />Voulez-vous &ecirc;tre le premier ?</div>");
    }

    function dataURItoBlob(dataURI) {
        // convert base64 to raw binary data held in a string  
        // doesn't handle URLEncoded DataURIs  

        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        } else {
            byteString = unescape(dataURI.split(',')[1]);
        }

        // separate out the mime component  
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to an ArrayBuffer  
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        // write the ArrayBuffer to a blob, and you're done  
        var dataView = new DataView(ab);
        var blob = new Blob([dataView], {type: mimeString});
        return blob;
    }

});